<template>
    <el-form :model="formData" ref="formRef" label-width="120px" :rules="SysMenuRules(formData)">
        <el-row :gutter="16" type="flex" justify="center" class="flex-wrap-wrap">
            <el-col :span="18">
                <el-form-item label="名称：" prop="name">
                    <el-input placeholder="请输入" v-model="formData.name"/>
                </el-form-item>
            </el-col>
            <el-col :span="18">
                <el-form-item label="路由地址：">
                    <el-select v-model="formData.path" filterable clearable class="m-2" placeholder="Select">
                        <el-option
                                v-for="item in routes"
                                :key="item.path"
                                :label="item.path"
                                :value="item.path"
                        />
                    </el-select>
                </el-form-item>
            </el-col>
            <el-col :span="18">
                <el-form-item label="排序：">
                    <el-input placeholder="请输入" v-model="formData.sort"/>
                </el-form-item>
            </el-col>
            <el-col :span="18">
                <el-form-item label="菜单图标：" prop="icon">
                    <el-space>
                        <el-icon @click="" v-if="formData.icon">
                            <component class="el-menu-icon" :is="formData.icon"></component>
                        </el-icon>
                        <el-popover :visible="iconVisible" placement="bottom" :width="800" title="菜单图标" trigger="click">
                            <template #reference>
                                <el-button text type="primary" @click="iconVisible = !iconVisible">选择</el-button>
                            </template>
                            <template #default>
                                        <el-space wrap :size="15">
                                            <el-icon v-for="item in iconList" @click="()=>{formData.icon = item;iconVisible =false }">
                                                <component class="el-menu-icon" :is="item"></component>
                                            </el-icon>
                                        </el-space>
                            </template>
                        </el-popover>

                    </el-space>
                </el-form-item>
            </el-col>
            <el-col :span="18">
                <el-form-item label="menuType：">
                    <el-input placeholder="请输入" v-model="formData.menuType"/>
                </el-form-item>
            </el-col>
        </el-row>
        <el-row justify="center">
            <el-button type="primary" icon="Check" @click="submitForm">保存
            </el-button>
        </el-row>
    </el-form>
</template>

<script lang="ts" setup>
    import {defineEmits, defineProps, ref} from "vue";
    import sysMenuApi, {SysMenuTree, SysMenuRules} from "../../../api/sys/SysMenuApi";
    import {FormInstance} from "element-plus/es";
    import {FormValidate} from "../../../common/utils/FormValidate";
    import MsgUtils from "../../../common/utils/MsgUtils";
    import {iconList} from "../../../common/utils/icons";
    import {useRouter} from "vue-router";

    //监听子组件变动,给父组件传值
    const emits = defineEmits(['saveSuccess']);

    const iconVisible = ref(false)
    let props = defineProps(['formData']);
    let formData = ref<SysMenuTree>(props.formData == undefined ? {} : props.formData)

    const formRef = ref<FormInstance>(null)


    let routes = useRouter().getRoutes();

    const submitForm = () => {
        new FormValidate().success(() => {
            sysMenuApi.saveOrUpdate(formData.value)
                .confirm('确认保存菜单?')
                .success(result => {
                    emits('saveSuccess', formData.value);
                })
                .errorMsg('保存失败!')
                .request();
        }).validate(formRef.value);
    }
</script>

<style scoped>
    .el-icon {
        font-size: 17px;
    }
</style>